<template>
  <div class="markdown-html" v-html="html" v-if="html"></div>
  <div v-else>
      404
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, Ref, ref, createApp } from 'vue';
import { useRoute } from 'vue-router';
import markdownIt from 'markdown-it';
import axios from 'axios';
import DemoBook from '@/components/demo-book/index.vue';

/** 渲染 Demo 代码贴及示例 */
const renderCode = (html: any, temporaryDom: any) => {
    /** 存储 pre 标签列表 */
    const PreList = temporaryDom.querySelectorAll('pre');
    /** 存储所有的代码序列 */
    const arrCodes: any[] = [];
    /** 循环所有的 pro 代码贴 */
    for(let i = 0;i < PreList.length; i++) {
        /** 每一个 code 中的HTML */
        const html = PreList[i].getElementsByTagName('code')[0].innerHTML.replace(/&lt;/g, '<').replace(/&gt;/g, '>')
        /** 代码贴的语言 */
        const type = PreList[i].getElementsByTagName('code')[0].getAttribute('class')?.replace(/language-/g, '');
        /** 所有代码 push 到数组中 */
        arrCodes.push({
            code: html,
            type,
            index: i+1,
        });
        /** 创建新的节点-作为 Vue render 的载器 */
        const div = document.createElement('div');
        div.setAttribute('id', `code_${type}_${i+1}`);
        /** 新增当前节点兄弟节点 */
        (PreList[i] as any).parentNode.insertBefore(div, PreList[i].nextElementSibling);
        /** 删除当前节点 */
        temporaryDom.removeChild(PreList[i]);
    }
    /** 赋值给当前渲染的页面节点 */
    html.value = temporaryDom.innerHTML;
    /** 延迟等待页面渲染完毕 */
    setTimeout(() => {
        /** 开始重新 render 节点 */
        arrCodes.forEach((({ code, type, index }) => {
            const NodeDom = document.getElementById(`code_${type}_${index}`);
            createApp(DemoBook, {
                type,
                code,
            }).mount(NodeDom as HTMLElement);
        }))
    }, 300);
}

export default defineComponent({
    setup() {
        /** 需要渲染的 html */
        const html: Ref<string> = ref('');
        /** 获取当前路由对象 */
        const route = useRoute();
        /** 获取本地 markdown 文件 */
        const res = () => {
            /** 发送请求发送本地文件 */
            axios.get(`/crab-ui/markdown${route.path}.md`).then(
                res => {
                    const markdown = new markdownIt().render(res.data);
                    /** 创建临时 DOM - 存储 Dom */
                    const temporaryDom = document.createElement('div');
                    temporaryDom.innerHTML = markdown;
                    renderCode(html, temporaryDom);
                }
            ).catch(err => {
                if (err.response.status === 404) {
                    html.value = '';
                    console.log(404)
                }
            })
        }
        /** 监听路由变化 */
        watch(() => route.path, (val: string) => {
            if (val !== '/') {
                res()
            }
        }, {
            immediate: true
        })
        /** 返回 */
        return {
            html
        }
    }
})
</script>
<style lang="scss">
.markdown-html{
    *{
        font-size: 14px
    }
    h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.1;
        padding-top: 16px;
        margin-bottom: 20px;
        color: var(--text-primary-color)
    }
    h2, h3, h4, h5, h6 {
        line-height: 1.5em;
        margin-top: 2.2em;
        margin-bottom: 4px;
        color: var(--text-primary-color-7)
    }
    h2 {
        font-size: 18px;
        margin: 40px 10px 20px 0;
        padding-left: 9px;
        border-left: 6px solid var(--primary-color);
        font-weight: 700;
        line-height: 1.4;
    }
    h3 {
        font-weight: 700;
        font-size: 16px;
        line-height: 1.4;
        margin: 10px 0 5px;
        padding-top: 10px;
    }
    h4 {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 1.4;
        margin: 10px 0 5px;
        padding-top: 10px
    }
    h5, h6 {
        font-size: 12px;
    }
    h5 {
        font-weight: bold;
        text-transform: uppercase;
    }
    h6 {
        font-weight: normal;
        color: #AAA;
    }
    img {
        width: 100%;
        border-radius: 5px;
        display: block;
        margin-bottom: 15px;
        height: auto;
    }
    dl, ol, ul {
        margin-top: 12px;
        margin-bottom: 20px;
        padding-left: 5%;
        line-height: 1.8;
    }
    p {
        margin: 0 0 20px;
        padding: 0;
        line-height: 1.8;
        color: var(--text-primary-color-5)
    }
    a {
        color: var(--primary-color-6);
        text-decoration: none;
    }
    a:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }
    a:focus {
        outline-offset: -2px;
    }
    blockquote {
        font-size: 1em;
        font-style: normal;
        padding: 30px 38px;
        margin: 0 0 15px;
        position: relative;
        line-height: 1.8;
        text-indent: 0;
        border: none;
        color: #888;
    }
    blockquote:before {
        content: "“";
        left: 12px;
        top: 0;
        color: #E0E0E0;
        font-size: 4em;
        font-family: Arial, serif;
        line-height: 1em;
        font-weight: 700;
        position: absolute;
    }
    blockquote:after {
        content: "”";
        right: 12px;
        bottom: -26px;
        color: #E0E0E0;
        font-size: 4em;
        font-family: Arial, serif;
        line-height: 1em;
        font-weight: 700;
        position: absolute;
        bottom: -31px;
    }
    strong, dfn {
        font-weight: 700;
    }
    em, dfn {
        font-style: italic;
        font-weight: 400;
    }
    del {
        text-decoration: line-through;
    }
    pre {
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
        display: block;
        border: none;
        color: #666;
        font-family: Courier, sans-serif;
    }
    code {
        color: var(--danger-color);
        border-radius: 4px;
        font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
        padding: 2px 4px;
        font-size: 90%;
    }
    p>code {
        color: var(--danger-color);
        background-color: var(--danger-color-1);
        font-size: .95em;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    figure {
        margin: 1em 0;
    }
    figcaption {
        font-size: 0.75em;
        padding: 0.5em 2em;
        margin-bottom: 2em;
    }
    figure img {
        margin-bottom: 0px;
    }
    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }
    ol p, ul p {
        margin-bottom: 0px;
    }
    li {
        margin-bottom: 0.75em;
        margin-top: 0.75em;
        color: var(--text-primary-color-5);
        font-size: 12px;
    }
    ol#footnotes {
        font-size: 0.95em;
        padding-top: 1em;
        margin-top: 1em;
        margin-left: 0;
        border-top: 1px solid #eaeaea;
        counter-reset: footer-counter;
        list-style: none;
        color: #555;
        padding-left: 5%;
        margin: 20px 0;
    }
    ol#footnotes li {
        margin-bottom: 10px;
        margin-left: 16px;
        font-weight: 400;
        line-height: 2;
        list-style-type: none;
    }
    ol#footnotes li:before {
        content: counter(footer-counter) ". ";
        counter-increment: footer-counter;
        font-weight: 800;
        font-size: .95em;
    }
    @keyframes highfade {
        0% {
            background-color: none;
        }
        20% {
            background-color: yellow;
        }
        100% {
            background-color: none;
        }
    }
    @-webkit-keyframes highfade {
        0% {
            background-color: none;
        }
        20% {
            background-color: yellow;
        }
        100% {
            background-color: none;
        }
    }
    a:target, ol#footnotes li:target, sup a:target {
        animation-name: highfade;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
        -webkit-animation-name: highfade;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-timing-function: ease-in-out;
    }
    a:target {
        border: 0;
        outline: 0;
    }
}
</style>